<script setup>

import {currentUser} from "@/App.vue";
import {Female, Male} from "@element-plus/icons-vue";
import {nextTick, onMounted, ref} from "vue";
import request from "@/assets/js/mobileRequest";
import {showSuccessToast} from "vant";
import router from "@/router";

const userInfo = ref({
  username:'test',
  description:'吾心吾行澄如明镜，所作所为皆是正义。吾心吾行澄如明镜，所作所为皆是正义。',
  level: 10,
  gender: '男',
  avatarImgUrl:''
})

const logout = () => {
  request({
    method: 'post',
    url: BASE_URL + '/v1/user/logout'
  }).then(res => {
    if (res.data.code === 2000) {
      showSuccessToast('退出成功')
      setTimeout(() => {
        router.push('/login')
      },500)
    }
  })
}

onMounted(() => {
  nextTick(() => {
    userInfo.value = currentUser.value
    userInfo.value.avatarImgUrl = BASE_URL + '/original' + currentUser.value.avatarImgUrl;
  })
})
</script>

<template>
  <div>
<!--    顶部信息-->
    <div style="padding-top: 6vh;background-color:#FB7299;">
      <div style="display: flex;padding: 0 5px;margin-bottom: 10px;gap: 20px">
        <van-image round fit="cover" width="100px" height="100px" v-model:src="userInfo.avatarImgUrl"/>
        <div style="position: relative;width: 60%;">
          <div style="position: absolute;bottom: 0;left: 0">
            <div>
              <span style="font-size: 25px">{{userInfo.nickname}}</span>
              <span style="font-size: 20px">
                      <Male v-if="userInfo.gender === '男'" style="width: 1em;height: 1em;color: #0aa1ed"/>
                      <Female v-else style="width: 1em;height: 1em;color: #FB7299"/>
              </span>

            </div>
            <van-tag v-if="userInfo.level === 20" type="success">骑手</van-tag>
            <van-text-ellipsis rows="2" :content="userInfo.description" style="font-size: 15px"/>
          </div>
        </div>
      </div>
      <van-cell-group inset>
        <van-cell  style="padding: 0">
          <template #value>
            <van-notice-bar color="#1989fa" left-icon="info-o" scrollable style="background-color:#ecf9ff;">
              更多精彩活动，等你发现
            </van-notice-bar>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

<!--    中部功能-->
    <div style="height: 65vh;overflow-y: scroll">
      <van-grid :border="false">
        <van-grid-item icon="user-o" text="个人空间" />
        <van-grid-item icon="orders-o" text="我的订单" />
        <van-grid-item icon="envelop-o" text="我的消息" />
        <van-grid-item icon="paid" text="我的钱包" is-link to="/purse"/>
      </van-grid>
      <van-cell-group title="骑手中心">
        <van-cell v-if="userInfo.level !== 20" title="成为骑手" is-link />
        <div v-else>
          <van-cell title="骑手中心" is-link />
          <van-cell title="我的接单" is-link />
          <van-cell title="收益管理" is-link />
          <van-cell title="接单设置" is-link />
        </div>
      </van-cell-group>
      <van-cell-group title="更多功能">
        <van-cell title="联系客服" is-link />
        <van-cell title="设置" is-link to="/setting"/>
        <van-cell title="退出登录" is-link @click="logout"/>
      </van-cell-group>
    </div>
  </div>
</template>

<style scoped>

</style>